<template>
  <div style="margin-top:30px">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="24">
          <!--<div class="grid-content bg-purple">
            <el-form-item label="入驻商" style="margin-right:15px" label-width="110px" prop="shipmentCode">
              <el-input v-model="form.shipmentCode" placeholder="请输入入驻商" style="width:100%"/>
            </el-form-item>
          </div>-->
          <div class="grid-content bg-purple">
            <el-form-item label="入驻商" style="margin-right:15px" label-width="110px" prop="shipmentCode">
              <shipmentSelect ref="shipmentSelect" url="/wms/warehouseShipment/business/shipments" @setCustomerCode="setShipmentCode" style="width: 100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="批次规则名称" style="margin-right:15px" label-width="110px" prop="name">
              <el-input v-model="form.name" placeholder="请输入批次规则名称" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" style="margin-right:15px" label-width="110px">
              <el-input v-model="form.remarks" placeholder="请输入备注" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <div style="margin-top: 20px;margin-left: 70px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-checkbox v-model="form.lot" label="收货批次"></el-checkbox>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-checkbox v-model="form.gmtManufacture" label="生产日期"></el-checkbox>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px;margin-left: 70px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-checkbox v-model="form.gmtExpire" label="过期日期"></el-checkbox>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-checkbox v-model="form.gmtStock" label="存货日期"></el-checkbox>
            </div>
          </el-col>
        </el-row>
      </div>

      <div style="margin-top: 20px;margin-left: 70px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-checkbox label="供应商" v-model="form.supplier"></el-checkbox>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-checkbox label="序列号" v-model="form.serialNumber"></el-checkbox>
            </div>
          </el-col>
        </el-row>
      </div>

      <div style="margin-top: 20px;margin-left: 70px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-checkbox label="生产批号" v-model="form.extendOne"></el-checkbox>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-checkbox label="商品批次" v-model="form.extendTwo"></el-checkbox>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px;margin-left: 70px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-checkbox label="扩展3" v-model="form.extendThree"></el-checkbox>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-checkbox label="扩展4" v-model="form.extendFour"></el-checkbox>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px;margin-left: 70px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-checkbox label="扩展5" v-model="form.extendFive"></el-checkbox>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-checkbox label="扩展6" v-model="form.extendSix"></el-checkbox>
            </div>
          </el-col>
        </el-row>
      </div>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import request from '@/utils/request'
  import { batchRuleAdd } from '@/api/basicInfo'
  import shipmentSelect from '@/views/components/shipmentSelect.vue'

  Vue.use(VXETable)
  export default {
    components: {
      shipmentSelect
    },
    data() {
      return {
        form: {
          code: '',                               //数据标识 ,
          extendFive: false,                         //扩展5 ,
          extendFour: false,                         //扩展4 ,
          extendOne: false,                          //生产批号 ,
          extendSix: false,                          //扩展6 ,
          extendThree: false,                        //扩展3 ,
          extendTwo: false,                          //商品批次 ,
          gmtExpire: false,                          //过期日期 ,
          gmtManufacture: false,                     //生产日期 ,
          gmtStock: false,                           //存货日期 ,
          lot: false,                                //批次 ,
          name: '',                               //名称 ,
          remarks: '',                            //备注 ,
          serialNumber: false,                       //序列号 ,
          shipmentCode: '',                        //所属入驻商 ,
          supplier: false,                           //供应商 ,
          state: '0'
        },
        rules: {
          name: [
            { required: true, message: '请输入批次规则名称', trigger: 'blur' }
          ],
          shipmentCode: [
            { required: true, message: '请选择所属入驻商', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
    },
    methods: {
      // 重置
      reset() {
        this.form.extendFive = false
        this.form.extendFour = false
        this.form.extendOne = false
        this.form.extendSix = false
        this.form.extendThree = false
        this.form.extendTwo = false
        this.form.gmtExpire = false
        this.form.gmtManufacture = false
        this.form.gmtStock = false
        this.form.lot = false
        this.form.serialNumber = false
        this.form.supplier = false
        this.form.name = ''
        this.form.remarks = ''
        this.$refs.shipmentSelect.setSelectValue('')

      },
      setShipmentCode(value) {
        this.form.shipmentCode = value
      },
      // 提交
      funcSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let arr = this.form
            for (let key in arr) {
              if (arr[key] === false) {
                arr[key] = 0
              }
              if (arr[key] === true) {
                arr[key] = 1
              }
            }
            const data = arr

            const rLoading = this.openLoading();
            batchRuleAdd(data).then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: 'success' })
              this.$emit('fatherAddMethod')
            })
          } else {
            return false
          }
        })

      },
      // 取消
      funcCancel() {
        this.$emit('fatherCancelMethod', 'add')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
</style>
